<style scoped>
  #map{
      width:100%;
      height:100%;
  }
</style>
<style>
   html,body{
    width:100%;
    height:100%;
  }
</style>
<template>
  <div id="map"></div>
</template>
 
<script>

export default {
  ready:function(){
    var that = this;
    var map = new BMap.Map('map');
    map.centerAndZoom(new BMap.Point(121.491, 31.233), 17); 
    map.addControl(new BMap.NavigationControl());    
    map.addControl(new BMap.ScaleControl());    
    map.addControl(new BMap.OverviewMapControl());    
    map.addControl(new BMap.MapTypeControl());    
    var local = new BMap.LocalSearch(this.search.range,   
            {renderOptions: {map: map,autoViewport: true,panel:"results"},pageCapacity: 8});      
    local.search(this.search.area);
    map.addEventListener('click',function(){
      console.log(this.getCenter());
    });
    //自定义搜索控件：
    function SearchCtrol(){    
      // 设置默认停靠位置和偏移量  
      this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
      this.defaultOffset = new BMap.Size(10, 10);    
    }    
    // 通过JavaScript的prototype属性继承于BMap.Control   
    SearchCtrol.prototype = new BMap.Control();
    SearchCtrol.prototype.initialize = function(map){    
      // 创建一个DOM元素   
       var search = document.createElement("div");
       var search_input = document.createElement('input');
       search_input.setAttribute('type',"text");
       search_input.setAttribute('placeholder',"地点");
      // 添加文字说明    
       search.appendChild(search_input);    
       // 设置样式        
       search.style.border = "1px solid gray";    
       search.style.backgroundColor = "white";    
       // 绑定事件，点击一次放大两级  
       search_input.addEventListener('change',function(){
        
        if(this.value!==''){
          that.search.area = this.value;
        }
       });
       // 添加DOM元素到地图中   
       map.getContainer().appendChild(search);    
       // 将DOM元素返回  
       return search;    
     };
     // 创建控件实例    
    var searchCtrol = new SearchCtrol();
    // 添加到地图当中 
    map.addControl(searchCtrol);
  },
  data () {
    return {
      search:{
        range:"中国",
        area:"广州市"
      }
    }
  },
  methods:{
    update:function(){
      
    }
  },
  events:{
    "child-campPlace":function(campPlace){
      var address = campPlace.address;
      this.search.area = address;
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>